<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PhotoSphereViewer - compass demo</title>

  <link rel="stylesheet" href="../dist/photo-sphere-viewer.css">
  <link rel="stylesheet" href="../dist/plugins/markers.css">
  <link rel="stylesheet" href="../dist/plugins/compass.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="photosphere"></div>

<script src="../node_modules/three/build/three.js"></script>
<script src="../node_modules/uevent/browser.js"></script>
<script src="../dist/photo-sphere-viewer.js"></script>
<script src="../dist/plugins/markers.js"></script>
<script src="../dist/plugins/compass.js"></script>

<script>
  const viewer = new PhotoSphereViewer.Viewer({
    container : 'photosphere',
    panorama  : 'sphere.jpg',
    caption   : 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
    loadingImg: 'assets/photosphere-logo.gif',
    plugins   : [
      [PhotoSphereViewer.MarkersPlugin, {
        markers: (() => {
          const m = [];
          for (let i = 0, l = Math.random() * 2 + 2; i < l; i++) {
            m.push({
              id       : `#${i}`,
              longitude: (i + Math.random()) * 2 * Math.PI / l,
              latitude : Math.random() * Math.PI / 3 - Math.PI / 6,
              image    : 'assets/pin-red.png',
              width    : 32,
              height   : 32,
              anchor   : 'bottom center',
              data     : {
                compass: '#cc3333',
              },
            });
          }

          m.push({
            id       : 'polygon',
            polygonPx: [
              [2941, 1413],
              [3042, 1402],
              [3222, 1419],
              [3433, 1463],
              [3480, 1505],
              [3438, 1538],
              [3241, 1543],
              [3041, 1555],
              [2854, 1559],
              [2739, 1516],
              [2775, 1469],
              [2941, 1413],
            ],
            svgStyle : {
              fill       : 'rgba(255,0,0,0.2)',
              stroke     : 'rgba(255, 0, 50, 0.8)',
              strokeWidth: '2px',
            },
            data     : {
              compass: 'rgba(255, 0, 50, 0.8)',
            },
          });

          m.push({
            id        : 'polyline',
            polylinePx: [2478, 1635, 2184, 1747, 1674, 1953, 1166, 1852, 709, 1669, 301, 1519, 94, 1399, 34, 1356],
            svgStyle  : {
              stroke        : 'rgba(80, 150, 50, 0.8)',
              strokeLinecap : 'round',
              strokeLinejoin: 'round',
              strokeWidth   : '20px',
            },
            data      : {
              compass: 'rgba(80, 150, 50, 0.8)',
            },
          });

          return m;
        })(),
      }],
      [PhotoSphereViewer.CompassPlugin, {
        // coneColor: 'rgba(150, 50, 50, 0.5)',
        // navigationColor: 'rgba(200, 200, 0, 0.5)',
        // size: '200px',
        // position: 'bottom left',
        // navigation: false,
        hotspots: [
          { longitude: '0deg' },
          { longitude: '90deg' },
          { longitude: '180deg' },
          { longitude: '270deg' },
        ],
      }],
    ],
  });
</script>
</body>
</html>
